import React from 'react';
import {Button, Card, Result, Space, Typography} from 'antd';
import {CheckCircleFilled, CloseCircleFilled} from '@ant-design/icons';
import styles from '../style.less';
import {IPaymentResult, OrderPaymentMethod} from "@/components/OrderPaymentModal/types";
import {PAYMENT_METHOD_CONFIG} from "@/components/OrderPaymentModal/constants";

const {Title, Text} = Typography;

interface PaymentResultProps {
  result: IPaymentResult;
  onClose: () => void;
  onRetry: () => void;
}

const PaymentResult: React.FC<PaymentResultProps> = ({result, onClose, onRetry}) => {
  if (!result) return null;

  return (
    <div className={styles.paymentResult}>
      <Card>
        {result.success ? (
          <Result
            status="success"
            icon={<CheckCircleFilled style={{color: '#52c41a', fontSize: 72}}/>}
            title="支付成功!"
            subTitle={`订单号: ${result.orderNum}`}
            extra={[
              <Button type="primary" key="close" onClick={onClose}>
                关闭
              </Button>,
            ]}
          >
            <div className={styles.resultDetails}>
              <Space direction="vertical">
                <div>
                  <Text strong>支付方式: </Text>
                  <Text>{PAYMENT_METHOD_CONFIG[result.paymentMethod].displayName}</Text>
                </div>
                <div>
                  <Text strong>支付金额: </Text>
                  <Text>¥{result.amount.toFixed(2)}</Text>
                </div>
                <div>
                  <Text strong>支付时间: </Text>
                  <Text>{new Date(result.paidAt).toLocaleString()}</Text>
                </div>
              </Space>
            </div>
          </Result>
        ) : (
          <Result
            status="error"
            icon={<CloseCircleFilled style={{color: '#ff4d4f', fontSize: 72}}/>}
            title="支付失败"
            subTitle="支付过程中出现问题，请重试或更换支付方式"
            extra={[
              <Button type="primary" key="retry" onClick={onRetry}>
                重试支付
              </Button>,
              <Button key="close" onClick={onClose}>
                关闭
              </Button>,
            ]}
          >
            <div className={styles.resultDetails}>
              <Text type="secondary">
                如果问题持续存在，请联系客服获取帮助
              </Text>
            </div>
          </Result>
        )}
      </Card>
    </div>
  );
};

export default PaymentResult;
